<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getOrderDetailAPI } from '@/server/api/Confirm'
import { computed } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter()
const route = useRoute()
// 订单id数组
const orderIdArr = ref([])
// 返回订单详情的数组
const OrderDetailArrr = ref([])
// 订单详情信息
// const OrderDetail = ref({})
const getOrderDetail = async (orderId) => {
    const res = await getOrderDetailAPI(orderId)
    console.log('data', res.data.data);
    OrderDetailArrr.value.push(res.data.data)
}
const amount = computed(() => {
    return (OrderDetailArrr.value.reduce((current, item) => current + item.transactionAmount, 0)).toFixed(2)
})
onMounted(() => {
    orderIdArr.value = JSON.parse(route.query.orderIdArr)
    // 先传一个订单id测试接口，后期再改
    for (let i = 0; i < orderIdArr.value.length; i++) {
        console.log(orderIdArr.value[i]);
        getOrderDetail(orderIdArr.value[i])
        console.log(OrderDetailArrr.value);

    }
})
// 接收参数,如果是购物车结算传过来的参数,返回CartView页面,如果是我的主页传过来的参数,跳转到我的页面 
const back = () => {
    router.push({
        path: '/CartView'
    })
}

</script>

<template>
    <div class="contain">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="left" @click="back">
                <img src="/images/cart/WhiteBack.png">
            </div>
            <div class="title">Successful</div>
        </div>

        <!-- 渐变盒子1 -->
        <div class="Gradientbox1"></div>
        <!-- 渐变盒子2 -->
        <div class="Gradientbox2"></div>

        <!-- 对勾 -->
        <div class="Tick"><img src="/images/cart/Tick.png"></div>

        <!-- Payment Successful -->
        <div class="PaySuccess">{{ $t("pay.success") }}</div>

        <!-- 占位1 -->
        <div class="Placeholder1"></div>

        <!-- 有border的横杠 -->
        <div class="bar">
            <!-- 支付详情 -->
            <div class="payDetail">
                <div class="shadow"></div>
                <div class="top">
                    <span class="pi">Pi</span>
                    <span class="money">{{ amount }}</span>
                </div>
                <div class="medium" v-for="(item, index) of OrderDetailArrr" :key="index">
                    <div class="left">
                        <span>{{ $t("pay.payMethods") }}:</span>
                        <span>{{ $t("pay.price") }}</span>
                        <span>{{ $t("pay.orderNumber") }}:</span>
                        <span>{{ $t("pay.orderCount") }}:</span>
                        <span>{{ $t("pay.orderTime") }}:</span>
                        <span>{{ $t("pay.payTime") }}:</span>
                    </div>
                    <div class="right">
                        <span>Pi</span>
                        <span>{{ item.transactionAmount }}</span>
                        <span>{{ item.orderId }}</span>
                        <span>{{ item.number }}</span>
                        <span>{{ item.createTime }}</span>
                        <span>{{ item.payTime }}</span>
                    </div>
                    <!-- 渐变盒子3小圆点 -->
                    <div class="Gradientbox3"></div>
                    <!-- 渐变盒子4小圆点 -->
                    <div class="Gradientbox4"></div>
                </div>

            </div>


        </div>
        <div class="bg"></div>
        <div class="back" @click="back">Back</div>
    </div>
</template>
<style lang='scss' scoped>
// 容器
.contain {
    width: 100vw;
    min-height: 100vh;
    background: rgba(100, 46, 142, 1);
    font-family: 'PingFang SC';
    overflow-x: hidden;
    position: relative;
}


// 导航栏
.nav {
    width: 360rem;
    height: 24rem;
    padding: 56rem 16rem 24rem;
    display: flex;
    position: fixed;
    z-index: 999;
    background: rgba(100, 46, 142, 1);

    .left {
        width: 24rem;
        height: 24rem;
        line-height: 24rem;
        text-align: center;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .title {
        height: 28rem;
        margin-left: 16rem;
        font-size: 20rem;
        font-weight: 500;
        line-height: 28rem;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }
}

.Gradientbox1 {
    width: 128rem;
    height: 113rem;
    background: linear-gradient(45deg, rgba(100, 46, 142, 1) 55%, #6E3C95 84%, white 100%);
    border-radius: 50%;
    position: absolute;
    top: 103rem;
    left: -48rem;
}

.Gradientbox2 {
    width: 61rem;
    height: 48rem;
    background: linear-gradient(320deg, rgba(100, 46, 142, 1) 50%, #6E3C95 83%, white 100%);
    border-radius: 50%;
    position: absolute;
    top: 52rem;
    left: 344rem;
    z-index: 1000;
}

// 对勾
.Tick {
    position: absolute;
    left: 103rem;
    top: 110rem;
    width: 64rem;
    height: 64rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 2rem 10rem rgba(12, 2, 20, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 32rem;
        height: 20rem;
    }
}

.PaySuccess {
    width: 104rem;
    height: 56rem;
    font-size: 20rem;
    font-weight: 600;
    line-height: 28rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    position: absolute;
    left: 183rem;
    top: 114rem;
}

// 占位
.Placeholder1 {
    height: 214rem;
}

.bg {
    width: 1000rem;
    height: 1000rem;
    border-radius: 50%;
    position: fixed;
    background-color: rgba(230, 230, 230, 1);
    transform: translateX(-300rem);
    z-index: 88;
}

.back {
    position: fixed;
    z-index: 99;
    left: 16rem;
    top: 760rem;
    width: 358rem;
    height: 50rem;
    border-radius: 8rem;
    background: #642E8EFF;
    font-size: 20rem;
    line-height: 50rem;
    text-align: center;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
}

.bar {
    width: 358rem;
    height: 10rem;
    border-radius: 141rem;
    background: rgba(255, 255, 255, 1);
    margin-left: 16rem;
    position: relative;
}

.payDetail {
    width: 326rem;
    min-height: 267rem;
    margin-left: 16rem;
    position: absolute;
    z-index: 99;
    padding-bottom: 100rem;

    .shadow {
        height: 10rem;
        width: 326rem;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 20%, #949090 100%);
    }

    .top {
        height: 82rem;
        width: 100%;
        box-sizing: border-box;
        box-shadow: 0 1rem 1rem 1rem rgba(230, 230, 230, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(100, 46, 142, 1);
        font-weight: 500;
        background: rgba(255, 255, 255, 1);

        .pi {
            font-size: 24rem;
            margin-right: 10rem;
        }

        .money {
            font-size: 36rem;
        }

    }

    .medium {
        height: 175rem;
        width: 100%;
        box-sizing: border-box;
        box-shadow: 0 1rem 4rem 2rem rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        position: relative;
        background: rgba(255, 255, 255, 1);

        .left,
        .right {
            height: 120rem;
            font-size: 16rem;
            font-weight: 400;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .left {
            width: 150rem;
            color: #666666FF;
            margin-left: 8rem;
        }

        .right {
            color: #333333FF;
            margin-right: 8rem;
        }
    }

    .Gradientbox3 {
        width: 12rem;
        height: 12rem;
        background: linear-gradient(to right, rgba(230, 230, 230, 1) 0, rgba(230, 230, 230, 1) 50%, #dad3d3 50%, #dad3d3 100%);
        border-radius: 50%;
        position: absolute;
        top: -4rem;
        left: -7rem;
    }

    .Gradientbox4 {
        width: 12rem;
        height: 12rem;
        background: linear-gradient(to right, #dad3d3 0, #dad3d3 50%, rgba(230, 230, 230, 1) 50%, rgba(230, 230, 230, 1) 100%);
        border-radius: 50%;
        position: absolute;
        top: -4rem;
        right: -7rem;
    }
}
</style>